﻿@using System.Web.Optimization
@using Resources
@using VocaDb.Model.Domain
@using VocaDb.Model.Domain.Security
@using VocaDb.Model.Service.Search
@using VocaDb.Web.Helpers;
@using VocaDb.Web.Resources.Domain
@using Res = ViewRes.SongList.DetailsStrings;
@using SearchRes = ViewRes.Search.IndexStrings;
@inherits VocaDb.Web.Code.VocaDbPage<VocaDb.Web.Models.SongLists.SongListDetailsViewModel>

@{

	if (!Model.IsFeatured) {
		ViewBag.Parents = new[] {
			Html.ActionLink(Model.SongList.Author.Name, "Details", "User", new {id = Model.SongList.Author.Id}, null)
		};
	} else {
		var categoryName = Translate.SongListFeaturedCategoryNames[Model.SongList.FeaturedCategory];
		ViewBag.Parents = new[] {
			Html.ActionLink(categoryName, "Featured", "SongList")
		};
	}

	var descriptionHtml = MarkdownParser.GetHtml(Model.SongList.Description);
	var descriptionStripped = MarkdownParser.GetPlainText(Model.SongList.Description);

	PageProperties.Description = descriptionStripped;

	var url = PageProperties.CanonicalUrl;

}

@section Head {
	@HtmlHelpers.OpenGraphMetaTags(PageProperties)
	<link rel="canonical" href="@url" />
}

@section Toolbar {
	@if (Model.SongList.CanEdit) {
		@Html.ActionLink(ViewRes.SharedStrings.Edit, "Edit", new { id = Model.SongList.Id }, new { id = "editListLink" })
		@:
		@Html.ActionLink(ViewRes.EntryDetailsStrings.ViewModifications, "Versions", new { id = Model.SongList.Id }, new { id = "viewVersions" })
		@:
}
	@Html.ActionLink(Res.Export, "Export", new { id = Model.SongList.Id }, new { id = "export" })
	@if (Model.IsFeatured) {
		@Helpers.EntryStatusMessage(Model.SongList.Status)
	}
}

@if (Model.IsFeatured && Model.SongList.Status == EntryStatus.Draft && !Model.SongList.Deleted) {
	@Helpers.DraftMessage(string.Empty)
}

@if (Model.SongList.Deleted) {
	@EntryDetailsHelpers.DeletedBanner(null)
}

<div class="media">
	@if (!string.IsNullOrEmpty(Model.SmallThumbUrl)) {
		<a class="pull-left" href="@Model.ThumbUrl">
			<img class="media-object" src="@Model.SmallThumbUrl" alt="Thumb" />
		</a>
	}
	<div class="media-body">
		@if (Model.SongList.EventDate.HasValue) {
			<p>@string.Format(Res.Date, Model.SongList.EventDate.Value.ToShortDateString())</p>
		}
		@if (!string.IsNullOrWhiteSpace(Model.SongList.Description)) {
			@Html.Raw(descriptionHtml)
		}
		@if (Model.SongList.Events.Any()) {
			<p>
				<h4>@Res.Events</h4>				
				<ul>
				@foreach (var ev in Model.SongList.Events) {
					<li>
						<a href="@Url.EntryDetails(ev, ev.UrlSlug)">
							@ev.Name
						</a>
						@if (ev.Date.HasValue && !string.IsNullOrEmpty(ev.VenueName)) {
							<small>(@ev.Date.Value.ToString("d"), @ev.VenueName)</small>
						} else if (ev.Date.HasValue) {
							<small>(@ev.Date.Value.ToString("d"))</small>
						} else if (!string.IsNullOrEmpty(ev.VenueName)) {
							<small>(@ev.VenueName)</small>
						}
					</li>
				}
				</ul>
			</p>
		}
	</div>
</div>

<div class="clearfix well well-transparent">
	<div class="btn-group songlist-mode-selection pull-left">
		<a data-bind="click: function() { playlistMode(false); }, css: { active: playlistMode() == false }" class="btn" href="#">
			<i class="icon-th-list noMargin"></i>
			@Res.Details
		</a>
		<a data-bind="click: function() { playlistMode(true); }, css: { active: playlistMode() == true }" class="btn" href="#">
			<i class="icon-list noMargin"></i>
			@Res.Playlist
		</a>
	</div>
	<a data-bind="css: { active: showTags() }, click: function() { showTags(!showTags()); }, visible: playlistMode() == false" class="btn pull-left" href="#" title="@Res.ShowTags">
		<i class="icon-tags"></i>
	</a>

	<div class="inline-block songlist-sort pull-left">
		@ViewRes.EntryIndexStrings.SortBy
		@KnockoutHelpers.Dropdown(Model.SortRules, "sort", "sortName")
	</div>

	<div class="pull-left songlist-text-query">
		<i class="icon-search"></i>
		<input type="text" data-bind="textInput: query" placeholder="@ViewRes.SharedStrings.Search" maxlength="200" />
	</div>
	&nbsp;
	<button class="btn" data-bind="click: function() { showAdvancedFilters(!showAdvancedFilters()); }, css: { active: showAdvancedFilters }">
		@SearchRes.MoreFilters
		<span class="caret"></span>
	</button>

	<div class="form-horizontal withMargin" data-bind="visible: showAdvancedFilters" style="display: none;">
		<div class="control-group">
			<div class="control-label">@SearchRes.SongType</div>
			<div class="controls">
				@SongHelpers.SongTypesDropdownKnockout("songType")
			</div>
		</div>

		<div class="control-group">
			<div class="control-label">@EntryTypeNames.Artist</div>
			<div class="controls" data-bind="with: artistFilters">
				@KnockoutHelpers.ArtistFilters(artistParticipationStatus: false)
			</div>
		</div>
		
		<div class="control-group">
			<div class="control-label">@ViewRes.SharedStrings.Tag</div>
			<div class="controls">
				@KnockoutHelpers.TagFilters()
			</div>
		</div>

		<div class="control-group">
			<div class="control-label"></div>
			<div class="controls">
				@SearchHelpers.AdvancedFilters(AdvancedSearchFilters.SongFilters)
			</div>
		</div>
	</div>
</div>

<div data-bind="css: { loading: loading }, visible: playlistMode() == false" style="display: none;">

	<div data-bind="with: paging" class="dropdown pull-right">
		@KnockoutHelpers.EntryCount()
	</div>

	<div data-bind="with: paging">
		@KnockoutHelpers.ServerSidePaging()
	</div>

	<table class="table table-striped">
		<tbody data-bind="foreach: page">
			<tr>
				<td style="width: 75px">
					<a data-bind="visible: song.thumbUrl, attr: { href: vdb.utils.EntryUrlMapper.details('Song', song.id), title: song.additionalNames }" href="#">
						<img data-bind="attr: { src: song.thumbUrl }" title="Cover picture" class="coverPicThumb img-rounded" />
					</a>
				</td>
				<td>

					<div class="pull-right" data-bind="visible: song.pvServices, with: song.previewViewModel">
						<a data-bind="click: togglePreview, css: { active: preview }" class="btn previewSong" href="#">
							<i class="icon-film"></i>
							@Res.Preview
						</a>
					</div>

					<span data-bind="text: order"></span>.
					<a data-bind="text: song.name, attr: { href: vdb.utils.EntryUrlMapper.details('Song', song.id), title: song.additionalNames }" href="#"></a>

					<span data-bind="visible: notes">
						(<span data-bind="text: notes"></span>)
					</span>

					<span data-bind="songTypeLabel: song.songType"></span>
					<!-- ko foreach: $parent.pvServiceIcons.getIconUrls(song.pvServices) -->
					<img data-bind="attr: { src: url, title: service }" />
					<!-- /ko -->

					@KnockoutHelpers.DraftIcon("status")

					<br />
					<small class="extraInfo" data-bind="text: song.artistString"></small>

					<div data-bind="visible: song.pvServices, with: song.previewViewModel">
						@SongHelpers.PVPreviewKnockout("$parents[2].pvServiceIcons.getIconUrls")
					</div>
				</td>
				<!-- ko if: $parent.showTags -->
				<td style="width: 33%">
					<div data-bind="visible: song.tags && song.tags.length">
						<i class="icon icon-tags"></i>
						<!-- ko foreach: song.tags -->
						<a href="#" data-bind="text: tag.name, attr: { href: $parents[1].mapTagUrl($data), title: tag.additionalNames }"></a><span data-bind="visible: $data != _.last($parent.song.tags)">,</span>
						<!-- /ko -->
					</div>
				</td>
				<!-- /ko -->
			</tr>
		</tbody>
	</table>

	<div data-bind="with: paging">
		@KnockoutHelpers.ServerSidePaging()
	</div>

</div>

<div data-bind="visible: playlistMode()" style="display: none;">
	<div data-bind="with: playlistViewModel" class="well well-transparent songlist-playlist">
		@{ Html.RenderPartial("Partials/_PlayList"); }
	</div>
</div>

@CommentHelpers.LatestCommentsKnockout()

@section BodyScripts {
	<link rel="stylesheet" href="@Url.Content("~/Content/Styles/songlist.css")" type="text/css" />
	<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
	@Scripts.Render("~/bundles/SongList/Details")
	<script type="text/javascript">

		$(function () {

			$("#editListLink").button({ icons: { primary: 'ui-icon-wrench' } });
			$("#viewVersions").button({ icons: { primary: 'ui-icon-clock' } });
			$("#export").button({ icons: { primary: 'ui-icon-arrowthickstop-1-s' } });

			var languageSelection = '@LanguagePreferenceInt';
			var listId = @Model.SongList.Id;

			var rootPath = '@RootPath';
			var urlMapper = new vdb.UrlMapper(rootPath);
			var repoFactory = new vdb.repositories.RepositoryFactory(urlMapper, @LanguagePreferenceInt, @UserContext.LoggedUserId);
			var userRepo = repoFactory.userRepository();
			var songRepo = repoFactory.songRepository();
			var artistRepo = repoFactory.artistRepository();
			var songListRepo = repoFactory.songListRepository();
			var resourceRepo = repoFactory.resourceRepository();
			var defaultSortRuleName = @ToJS(Res.DefaultSortRule);
			var cultureCode = '@UICulture';
			var pvPlayerElem = $("#pv-player-wrapper")[0];
			var pvPlayersFactory = new vdb.viewModels.pvs.PVPlayersFactory(pvPlayerElem);
			var latestComments = @ToJS(Model.SongList.LatestComments);
			var canDeleteAllComments = @ToJS(UserContext.HasPermission(PermissionToken.DeleteComments));

			var vm = new vdb.viewModels.songList.SongListViewModel(urlMapper, songListRepo, songRepo, userRepo, artistRepo,
				resourceRepo, defaultSortRuleName, latestComments, @UserContext.LoggedUserId, languageSelection, cultureCode, listId, pvPlayersFactory,
				canDeleteAllComments);
			ko.applyBindings(vm);

		});

	</script>
}
